<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
     <div style="margin-bottom: 50px;">
      <main-table :columns="columns" :data="tableList" :pagination="pagination" @getData="fetchTableList" @handleSelectChange="handleSelectChange" @selectAll="selectAll" :loading="loading" wrapperHeight="450px">
      </main-table>
     </div>

       <el-form-item label="服务内容" prop="task_types" class="assign-checkbox">
         <el-checkbox-group v-model="form.task_types">
           <el-checkbox v-for="(item,index) in taskList" :label="item.id" :key="item.id">
              {{ item.name }}（佣金：{{ item.cost_num }}元{{ item.pay_type | getPayType }}; {{ item | getPayTypes }}）
           </el-checkbox>
         </el-checkbox-group>
       </el-form-item>
       <el-form-item label="服务时间" prop="service_time">
         <el-date-picker
           v-model="form.service_time"
           align="right"
           type="datetime"
           value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="请选择服务时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="截止时间" prop="service_end">
         <el-date-picker
           v-model="form.service_end"
           align="right"
           type="datetime"
           value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="请选择截止时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="备注" prop="service_remark">
         <el-input type="textarea" v-model="form.service_remark" placeholder="请输入备注"></el-input>
       </el-form-item>
     <el-form-item class="contacts-add">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancle">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as APITask from '@/api/task'
import * as APIOrder from '@/api/order'
// import * as APIAdmin from '@/api/admin'
 import { servicerList } from "@/api/oldermanager";
import mainTable from "@/components/main-table/index";
import { age, sex } from "@/utils"
export default {
  name: 'assign-service',
  components: {
    mainTable
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {

      form: {
        task_types: []
      },
      // 地图插件
      geocoder: null,
      // 表单校验
      rules: {
        task_types: [
          { required: true, message: '请选择服务内容', trigger: 'change' }
        ],
        service_time: [
          { required: true, message: '请选择服务时间', trigger: 'blur' }
        ],
        service_end: [
          { required: true, message: '请选择截止时间', trigger: 'blur' }
        ]
      },
      columns: [
        {
          selection: true
        },
        {
          index: true
        },
        { prop: "name", label: "姓名" },
        { prop: "mobile", label: "联系方式" },
        { prop: "sex", label: "性别", formatter: this.genderFormatter },
        { prop: "age", label: "年龄" },
        { prop: "in_time", label: "入职时间" },
        { prop: "emergency_name", label: "紧急联系人" },
        { prop: "emergency_mobile", label: "紧急联系人电话" },
        { prop: "is_jujia", label: "站点身份", formatter: this.isJujiaFormatter},
        { prop: "remark", label: "备注" },
      ],
      tableList: [],
      pagination: {
        current: 1,
        size: 15,
        total: 0
      },
      loading: false,
      selection: [],
      taskList:[],
      searchForm: {
        page: 1
      },
    }
  },
  filters: {
    getPayType (cost_type) {
      if (cost_type == '2') {
        return '/次'
      } else if (cost_type == '3') {
        return '/小时'
      }
    },
    getPayTypes (item) {
      if (item.cost_type == '1') {
        return '扣费：免费'
      } else if (item.cost_type == '2') {
        return '扣费：次数收费；单次服务时长：' + item.ci_long + '小时；每月服务次数：' + item.ci_num + '次'
      } else if (item.cost_type == '3') {
        return '扣费：小时收费；单次服务时长：' + item.ci_long + '小时；每月服务次数：' + item.ci_num + '次；最大时长：' + item.cost_max_time + '小时；超出收费/小时：' + item.cost_chao_num + '元'
      }
    }
  },
  beforeCreate () {
  },
  mounted () {
     this.fetchTableList();
     this.getTaskList();
  },
  methods: {
    getTaskList () {
      const self = this;
      APITask.taskList(this.searchForm).then((res) => {
        self.taskList = res.data;
      })
    },
    // 添加老人家属
    onSubmit () {
      const { task_types, service_time, service_end, service_remark } = this.form
      const arr = []
      if (this.selection.length === 0) {
        this.$message.warning('请先选择老人')
        return false
      }
      this.selection.forEach(item => {
        arr.push(item.id)
      })
      this.$refs.form.validate((valid) => {
        if (valid) {
          const form = {
            task_type: task_types.join(','),
            service_time,
            service_end,
            oid: this.data.id,
            servicer_id: arr.join(','),
            service_remark
          }
          APIOrder.myorderCreate(form).then(res => {
            this.cancle()
          })
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    },
    // 选中老人
    handleSelectChange (val) {
      this.selection = val
    },
    // 全选
    selectAll (val) {
      this.selection = val
    },
    genderFormatter(row, column) {
      if (row.sex == 1) {
        return "男";
      } else if (row.sex == 2) {
        return "女";
      }
    },
    isJujiaFormatter(row, column){
      if (row.is_jujia == 2) {
        return "站点站长";
      } else if (row.is_jujia == 1) {
        return "站点站员";
      } else if (row.is_jujia == 0) {
        return "无";
      }
    },
    fetchTableList(){
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...{ team_id: this.data.team_id }
      }
      servicerList("get", this.searchForm).then((resp) => {
        const { list = [], total = 0 } = resp.data;
        this.tableList = list || []
        this.pagination.total = total
      }).finally(() => {
        this.loading = false
      })


    }
  },
  watch: {
    data: {
      handler (res) {
        const resData = JSON.parse(JSON.stringify(res));
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    },
  }
}
</script>

<style lang="scss">
  .user-form-item {
    height: 33px;
  }
  .el-select{
    width: 100%;
  }
</style>
